<template>
	<view style="background-color: #FFFFFF;">
		<view style="height: 90rpx;display: flex;justify-content: space-between;width: 90%;margin: 0 auto;">
			<view style="height: 100%; ">
				<scroll-view scroll-x class="bg-white nav text-center">
					<view class="cu-item title" v-for="(item, index) in tabs" :key="index" :class="index==tabCur1 ? '':''" @tap="tabSelect1" :data-index="index">
						 <!-- 公益组织榜 -->
						 {{ item.chartName || '' }}
					</view>
					<!-- <view class="cu-item" :class="1==tabCur1?'text-pink cur':''" @tap="tabSelect1" data-id="1">
						<text class="cuIcon-upstagefill"></text> 城市榜
					</view> -->
				</scroll-view>
			</view>
			<!-- 切换按钮 -->
			<!-- <nkswitch :tabCur1="tabCur1" :changeMsg="changeMsg"></nkswitch> -->
		
			<!-- <view class="bg-white" style="height: 100%;width: 40%;display: flex; align-items: center;">
				<view
					style="height: 55rpx;margin-left: 26% ;display: flex;border-radius: 1000rpx;border: 2rpx #FD505C solid;opacity: 0.7;">
					<button class="cu-btn btnSm round" :class="!skin?'bg-white':'.bg-orange2'"
						@click="switchNotice()">排序</button>
					<button class="cu-btn btnSm round" :class="skin?'bg-white':'bg-orange2'"
						@click="switchNotice()">排名</button>
				</view>
			</view> -->
		</view>
		
		<view style="height: 990rpx;display: flex;">
			<view class="VerticalBox" style="width: 90%;">
				<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation style="height:880rpx">
					<view class="cu-item" :class="item.provinceCode==tabProvince?'text-orange2 cur':''"
						v-for="(item,index) in tabs[tabCur1].chartCategories" :key="index" @tap="provinceSelected" :data-id="item.provinceCode">
						{{item.provinceName}}
					</view>
				</scroll-view>
		
				<view style="width: 100%;height:880rpx;">
					<!-- <view class="cu-bar bg-white margin-lr-sm">
						<view class="search-form round">
							<text class="cuIcon-search"></text>
							<input type="text" placeholder="搜索" confirm-type="search" @input="searchIcon"/>
						</view>
					</view> -->
					<scroll-view style="width: 100%;height:100%;" :scroll-y="true" @scrolltolower="moveViewStart">
						<view class="padding-top-sm padding-lr-sm">
							<view class="cu-list menu-avatar">
								<view class="cu-item" v-for="(item,index) in organizationList" :key="index">
									<view class="cu-avatar round lg">
										<image class="cu-avatar round lg" :src="item.organizationLogo"></image>
									</view>
									<view class="content">
										<view class="text-black" style="font-weight: 600;font-size: 28rpx;">
											{{item.organizationName}}</view>
										<view class="text-gray text-sm flex">
											<text class="text-cut">
												<!-- <text class="cuIcon-info text-orange2"></text> -->
												共计{{item.personCountView}}人参与
											</text>
										</view>
									</view>
									<view class="integral" style="text-align: right;margin-left: 20rpx;">
										<view class="text-grey text-sm margin-bottom-xs">积分</view>
										<view class="cu-tag round line tagSm text-orange2">{{item.creditCountView}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		
			<view class="VerticalBox" style="width: 90%;display: none;" v-if="tabCur1==1">
				<view style="width: 100%;height:980rpx;overflow: auto;">
					<view class="padding-top-sm padding-lr-sm">
						<view class="cu-list menu-avatar">
							<view class="cu-item" v-for="(item,index) in provinceList" :key="index">
								<view class="cu-avatar round lg"
									style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);">
								</view>
								<view class="content">
									<view class="text-grey">凯尔</view>
									<view class="text-gray text-sm flex">
										<text class="text-cut">
											<text class="cuIcon-infofill text-red  margin-right-xs"></text>
											我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
										</text>
									</view>
								</view>
								<view class="action">
									<view class="text-grey text-xs">22:20</view>
									<view class="cu-tag round bg-grey sm">5</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import nkswitch from '@/components/xuan-switch/xuan-switch.vue'
	import {
		getProviceList
	} from '@/api/information.js'

	import {
		getIndexOrganizationList
	} from '@/api/organization.js'

	export default {
		props: ['baseInfo'],
		components: {
			nkswitch
		},
		data() {
			return {
				fast_dfs_url:'http://nottomention.emake.cn/',
				tabCur1: 0, // 所选tab的索引
				tabs: [], // tab数据和省数据
				categoryId: '', // tab切换的类型
				skin: false,
				provinceList: [],
				organizationList: [],
				cityList: [],
				tabProvince: this.baseInfo.chart?.chartCategories?[0].provinceCode : '',
				load: true,
				loading: false,				
				loadTitle:'加载更多',
				loadend: false, // 加载到底部
				page: 1, // 页数
				pagesize: 10 // 每页条数
			}
		},
		mounted() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			// this.getProviceList();
		},
		// onReady() {
		// 	uni.hideLoading();
		// },
		methods: {
			changeMsg(text){
				this.tabCur1=text
			},
			tabSelect1(e) {
				const index = e.currentTarget.dataset.index;
				this.tabCur1 = index;
				this.categoryId = this.tabs[index].chartId;
				this.tabProvince = this.tabs[index].chartCategories.length > 0 ? this.tabs[index].chartCategories[0].provinceCode : ''
				this.getOrganizationList(this.tabProvince)
			},
			provinceSelected(e) {
				this.tabProvince = e.currentTarget.dataset.id;
				this.getOrganizationList(this.tabProvince, true);
			},
			switchNotice() {
				this.skin = !this.skin;
			},
			moveViewStart() {
				console.log(23243);
				this.getOrganizationList(this.tabProvince);
			},
			async getProviceList() {
				uni.showLoading({
					title: '省份数据加载中...',
					mask: true
				});
				getProviceList().then(res=>{
					//uni.hideLoading();
					if(res.code==200){
						this.provinceList = res.data;
						this.tabProvince = res.data ? res.data[0]['provinceId'] : ''
					}else{
						uni.showToast({
							title: '获取省份数据失败！',
							duration: 1000,
							icon: 'none',
						});
					}
				});
			},
			async getOrganizationList(provinceCode, isPage) {
				if (isPage) {
					this.loadend = false
					this.page = 1
					this.organizationList = []
				}
				if (this.loading) return
				if (this.loadend) return
				this.loading = true
				this.loadTitle = ''
				uni.showLoading({
					title: '数据加载中...',
					mask: true
				});
				const query = {
					page: this.page,
					pagesize: this.pagesize,
					provinceCode: provinceCode || '',
					categoryId: this.categoryId
				}
				getIndexOrganizationList(query).then(res=>{
					uni.hideLoading();
					if(res.code==200){
						const list = res.data.lists
						this.loadend = list.length < this.pagesize
						this.organizationList = [...this.organizationList, ...list]
						this.loadTitle = this.loadend ? '我也是有底线的' : '加载更多'
						this.page++
					}else{
						uni.showToast({
							title: '获取数据失败！',
							duration: 1000,
							icon: 'none',
						});
					}
					this.loading = false
				});
			},
			formatNumber(num) {
				if (num > 10100) {
					return (num / 10000).toFixed(2) + "万";
				}
				return num;
			}
		},
		watch: {
			baseInfo(val) {
				this.tabs = val.chart
				if (val.chart.length > 0) {
					this.tabProvince = val.chart[0].chartCategories.length > 0 ? val.chart[0].chartCategories[0].provinceCode : ''
					this.categoryId = val.chart[0].chartId
				}
				this.getOrganizationList(this.tabProvince);
			}
		}
	}
</script>

<style>
	.screen-swiper {
		min-height: 600upx;
	}

	.VerticalNav.nav {
		width: 200rpx;
		white-space: initial;
	}
	.title{
		font-size: 40rpx;
		font-weight: 600;
		color: #000000;
	}

	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		background-color: #fff;
		margin: 0;
		border: none;
		height: 50px;
		position: relative;
	}

	.VerticalNav.nav .cu-item.cur {
		background-color: #fff;
	}

	.VerticalNav.nav .cu-item.cur::after {
		content: "";
		width: 8rpx;
		height: 30rpx;
		border-radius: 10rpx 0 0 10rpx;
		position: absolute;
		background-color: currentColor;
		top: 0;
		right: 0rpx;
		bottom: 0;
		margin: auto;
	}

	.VerticalBox {
		display: flex;
		box-shadow: 0px 4px 20px -2px rgba(0, 0, 0, 0.1);
		border-radius: 10px;
		margin: 20rpx auto;
	}

	.btnSm {
		padding: 0 20upx;
		font-size: 24upx;
		height: 50upx;
	}
	
	.cu-list.menu-avatar>.cu-item{
		height: auto;
		min-height: 140upx;
		padding: 20upx 0;
	}

	.cu-list.menu-avatar>.cu-item>.cu-avatar {
		position: relative;
		margin-left: 10upx;
		left: 0;
	}

	.cu-list.menu-avatar>.cu-item .content {
		/* position: absolute; */
		position: relative;
		margin-left: 20upx;
		/* width: calc(100% - 76upx - 40upx - 100upx - 0upx); */
		width: 0;
		flex: 1;
		line-height: 1.6em;
		left: 0;
	}
	.cu-list.menu-avatar>.cu-item .integral {
		min-width: 60upx;
	}
	.cu-list.menu-avatar>.cu-item .integral .tagSm{
		width: auto;
	}

	.padding-lr-sm {
		padding-left: 10upx;
		padding-right: 10upx;
	}

	.tagSm {
		width: 150upx;
		height: 46upx;
	}
	.text-orange2{
		/* color: #FD505C; */
	}
	.line-orange2{
		color: #FF707A;
	}
	.bg-orange2{
		color: #FD505C;
	}
	.cu-tag{
		justify-content: flex-end;
		padding-right: 0;
	}
</style>
